import {Upload, Modal, message} from 'antd';
import React, {Component} from 'react';
import {config} from "../config";
import PlusOutlined from "@ant-design/icons/es/icons/PlusOutlined";
import mUtils from "../utils/utils";

class PicturesWall extends Component {
    state = {
        previewVisible: false,  //是否显示预览的图片
        previewImage: '',  //预览图片的地址
        fileList: this.props.fileList || [], //已经上传的文件列表（受控）
        parameter: {},  //传给服务器的参数
        fileLength: this.props.size, //一共显示多少张图片
        multiple: this.props.multiple,  //是否支持多选
        isOccur: 2
    };
    // 上传文件之前 判断是否为图片类型
    beforeUpload = (file) => {
        const isJPG = file.type === 'image/jpeg';
        const isPng = file.type === 'image/png';
        const isGif = file.type === 'image/gif';
        if (!isJPG && !isPng && !isGif) {
            this.setState({
                isOccur: 1
            });
            message.error('注意上传的图片格式（只能上传jpeg和png）!');
        } else if (file.size > 2097152) {
            this.setState({
                isOccur: 1
            });
            message.error('上传的图片大小不能大于 2M ');
        } else {
            this.setState({
                isOccur: 2
            });
        }
    }

    // 删除图片
    handleRemove = (file) => {
        this.setState({
            isOccur: 2
        });
    };

    // 关闭预览的弹出框
    handleCancel = () => {
        this.setState({previewVisible: false});
    };

    // 点击文件链接或预览图标时的回调  即放大图片观看
    handlePreview = (file) => {
        console.log(file);
        this.setState({
            previewImage: file.url || file.thumbUrl,  //传给Modal框中图片地址H
            previewVisible: true,
        });
    };

    // 上传中、完成、失败都会调用这个函数。
    handleChange = ({fileList}) => {
        if (this.state.isOccur == 2) {
            this.setState({fileList});
            let file = [];

            // 服务器返回的数据
            fileList.forEach((item) => {
                if (item.response) {
                    if (item.response.code == 1) {
                        file.push(item.response.data);
                    }
                }
            });
            this.props.fileUpdate(file, fileList);
        }
    };

    render() {
        const {previewVisible, previewImage} = this.state;
        const {fileList} = this.props;
        const uploadButton = (
            <div>
                <PlusOutlined />
                <div className="ant-upload-text">上传</div>
                {/*<div style={{opacity:'0.6',color:'red'}}>最多显示{this.state.fileLength}张</div>*/}
            </div>
        );
        return (
            <div className="clearfix">
                <Upload
                    action={config.serverUrl + '/api/upload/uploadfile?token=' + mUtils.getToken()} //必选参数, 上传的地址
                    listType="picture-card" //上传列表的内建样式，支持两种基本样式 text or picture
                    fileList={fileList} //已经上传的文件列表（受控）
                    data={this.state.parameter}  //上传所需参数或返回上传参数的方法
                    onPreview={this.handlePreview}  //点击文件链接或预览图标时的回调
                    onRemove={this.handleRemove}
                    onChange={this.handleChange} //上传文件改变时的状态 上传中、完成、失败都会调用这个函数。
                    beforeUpload={this.beforeUpload} //上传文件之前的钩子，参数为上传的文件
                    multiple={this.state.multiple}  //是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件。
                >
                    {this.props.fileList.length >= this.state.fileLength ? null : uploadButton}
                </Upload>

                {/*预览图片的弹出框*/}
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{width: '100%'}} src={previewImage}/>
                </Modal>
            </div>
        );
    }
}

export default PicturesWall;
